<template>
  <div>
    <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> 新建商
品 </a-button>
    <a-drawer
      title="新建商品信息"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form :form="form" layout="vertical" hide-required-mark @submit="handleSubmit">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="商品ID">
              <a-input
                v-decorator="[
                  'productId',
                  {
                    rules: [{ required: true, message: '请输入商品ID' }],
                  },
                ]"
                placeholder="请输入商品ID"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="商品所属">
              <a-select
                v-decorator="[
                  'category',
                  {
                    rules: [{ required: true, message: '请选择商品所属' }],
                  },
                ]"
                placeholder="请选择商品所属"
              >
                <a-select-option value="BIRDS">
                  BIRDS
                </a-select-option>
                <a-select-option value="FISH">
                  FISH
                </a-select-option>
                <a-select-option value="DOGS">
                  DOGS
                </a-select-option>
                <a-select-option value="CATS">
                  CATS
                </a-select-option>
                <a-select-option value="REPTILES">
                  REPTILES
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
           <a-col :span="6">
            <a-form-item label="商品名称">
             <a-input
                v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入商品名称' }],
                  },
                ]"
                placeholder="请输入商品名称"
              />
            </a-form-item>
           </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="宠物特征">
              <a-input
                v-decorator="[
                  'description',
                  {
                    rules: [{ required: true, message: '请描述该宠物特征' }],
                  },
                ]"
                placeholder="请描述该宠物特征"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="32">
            <a-col :span="32">
                <a-form-item label="宠物图片">
                    <up-load @upload-custom="upload" ref="upload"/>
                </a-form-item>
            </a-col>
        </a-row>
       <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
        <a-form-item>
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" html-type="submit">
          提交
        </a-button>
        </a-form-item>
      </div>
      </a-form>
    </a-drawer>
  </div>
</template>
<script>
import UpLoad from "@/components/upload.vue";
import { mapActions } from 'vuex'
export default {
    components:{
        UpLoad,
    },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      picture: null
    };
  },
  methods: {
    ...mapActions({
      addProduct: 'product/addProduct',
    }),
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.form.resetFields();
      this.$refs.upload.f();
    },
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),

      });
    },
    handleSubmit(e) {
      e.preventDefault();
      let self = this
      this.form.validateFields((err, values) => {
        if (!err) {
          values.picture = self.picture
          // console.log('s')
          self.addProduct(values).then((res) => {
            this.openNotification("OK","新建商品信息成功",res)
            this.$emit('update-list')
            self.onClose();
          },(error)=>{
            this.openNotification("NOK","新建商品信息失败",error)
            self.onClose();
          })
        }
      });

    },
    upload(file) {
      this.picture = file
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
